<template>
	<view class="page">
		<div class="title">注册</div>
		<div class="sub-title">
			<text class="text1">您还没有账号？</text>
			<text class="text2" @click="jump()">点击登录</text>
		</div>

		<div class="form">
			<div class="">

				<radio-group class="blue" style="display:flex;justify-content: flex-start;">
					<view @tap="reg_type = '0'">
						个人会员
						<radio  :value="reg_type" :checked="reg_type == '0'" class="blue" style="margin-left:5px" />

					</view>
					<view style="margin-left:10px;" @tap="reg_type = '1'">企业会员
						<radio :value="reg_type" :checked="reg_type == '1'" class="blue" style="margin-left:5px" />
					</view>
				</radio-group>

			</div>
			<div class="item">
				<text class="padding-right:20rpx">+86</text>
				<input v-model="mobile" placeholder="请输入手机号" style="margin-left:10px;" />
				<div style="width:18px;position:absolute;right:.2rem;bottom:.7rem;" @click="mobile=''">
					<img v-if="mobile!=''" src="@/static/btn-search-delete.png" style="display: inline-block;width: 18px;height:18px;vertical-align: middle;"/>
				</div>
			</div>
			<div class="item">
				<input v-model="sms_code" placeholder="请输入验证码" />
				<div @tap="getCode" class="getCode">{{ verificationCode }}</div>
			</div>
			<div class="item">
				<input v-model="pwd" placeholder="请设置密码" />
			</div>
			<div class="item">
				<input v-model="nickname" placeholder="请填写用户名称/企业名" />
			</div>
			<block v-if="reg_type=='1'">
			<div  class="item"
				style="height:4rem;margin-top:0.5rem;border-bottom:1px solid rgb(230, 230, 230, 0.6);position:relative;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
				<input readonly placeholder="请上传企业营业执照" />
				<!-- {{imgpath}} -->
				<div v-for="(vo,index) in imgpath" class="aui-col-xs-2 ming-pr" style="width:20%;margin-bottom:.8rem;">
					<img class="img" :src="vo" style="height:3rem;border-radius:0.2rem;">
					<img class="btn-delete" src="@/static/btn-close-hui.png" tapmode @click="delimg(index)"
						style="width:0.8rem;">
				</div>
				<!-- 添加商品的图标 -->
				<div v-if="img==''" class="aui-col-xs-2 ming-pr" tapmode @click="sel_pic()" style="width:20%;">
					<img src="@/static/addpicture.png" style="height:3rem;margin-bottom:.5rem;" />
				</div>
			</div>
			<div class="item">
				<input v-model="inviteCode" placeholder="请填写邀请码(必填)" />
			</div>
			</block>
			<block v-else>
				<div class="item">
					<input v-model="inviteCode" placeholder="请填写邀请码(选填)" />
				</div>
			</block>
			<div class="item" @tap="btnClick">
				<input v-model="regionAddress" placeholder="请选择你的所在地区" />
			</div>
		</div>
		<div class="btn" @tap="formSubmit">
			<div class="submit" form-type="submit" :class="{'aui-bg-linear':mobile!=''&&sms_code!=''&&pwd!=''}">注册
			</div>
		</div>


		<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
			<checkbox class="blue" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false"
				value="2" />
			<view>
				登录注册需同意<text @tap="onDetails($store.state.common.appConfig.user_agreement, '用户协议')">用户协议</text>及<text
					@tap="onDetails($store.state.common.appConfig.user_agreement, '隐私协议')">隐私协议</text>
			</view>
		</checkbox-group>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>
<script>
	import graceChecker from "@/common/graceChecker"; //来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	export default {
		data() {
			return {
				img: [],
				imgpath: [],
				reg_type: "0",
				submitDisabled: true,
				title: "表单验证",
				pageroute: "",
				mobile: "",
				pwd: '',
				sms_code: '',
				inviteCode: '',
				nickname: '',
				regionId: '',
				regionAddress: '',
				checked: 0,
				value: "",
				verificationCode: "获取验证码",
				timer: null,
				time: 60,
			};
		},
		onLoad(options) {
			this.pageroute = '/page/user';
			if (options.mobile) {
				this.mobile = options.mobile;
				this.submitDisabled = false;
			}
		},
		methods: {
			btnClick() {
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				console.log(address)
				this.regionIdCode = address.adcode
				this.regionAddress = address.formatted_address;
				// this.addressData.country = address.country;
				// this.addressData.province_name = address.province;
				// this.addressData.city_name = address.city;
				// this.addressData.citycode = address.citycode;
				// this.addressData.area_name = address.district;
				// this.addressData.detailed_address = address.formatted_address;
				// this.addressData.location = address.location;
				// this.addressData.adcode = address.adcode;
				// this.addressList.location = address.location;
				// this.addressList.adcode = address.adcode;
			},
			formSubmit: function(e) {

				

				if (!this.pwd) {
					uni.showToast({
						title: '请设置密码'
					})
					return;
				}

				if (!this.isPoneAvailable(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号'
					})
					return;
				}
				
				if (!this.inviteCode && this.reg_type=='1') {
					uni.showToast({
						title: '请填写邀请码'
					})
					return;
				}
				
				if (!this.checked) {
					uni.showToast({
						title: '请同意用户协议'
					})
					return;
				}

				uni.request({
					url: "/api/login/register",
					data: {
						mobile: this.mobile,
						password: this.pwd,
						authCode: this.sms_code,
						img: this.img,
						reg_type: this.reg_type,
						regionId: this.regionIdCode,
						inviteCode: this.inviteCode,
						nickname: this.nickname,
					},
					success: (res) => {
						console.log(res)
						
						if (res.data.status == 0) {
							uni.showToast({
								title: res.data.msg
							})
							return;
						}
						
						
						// if (res.data.status == 1) {
							this.$store.dispatch('user/login', res);
							this.$store.dispatch('cart/login');
							uni.showModal({
								title: '注册成功',
								content: '点击确定使用手机号登录',
								success: (msg) => {
									if (msg.confirm) {
										this.$wanlshop.to(`/pages/user/auth/auth?url=${this.pageroute}`);
									} else if (msg.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						// }
						
					},
					fail: (res) => {

					},
				});

			},
			delimg: function(index) {
				this.img.splice(index, 1)
				this.imgpath.splice(index, 1)
			},
			sel_pic: function() {

				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: 1,
					success: res => {

						uni.uploadFile({
							url: 'https://zm.zonmay.com/api/UpFiles/uploadimg',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: null,
							success: res => {
								console.log(JSON.parse(res.data))
								this.img.push(JSON.parse(res.data).data
									.pic_id);
								this.imgpath.push(JSON.parse(res.data).data
									.url);
							},
							fail: error => {
								this.$wanlshop.msg(JSON.parse(error.data).msg);
							}
						});

					}
				})

			},
			jump() {
				uni.navigateTo({
					url: `/pages/user/auth/auth?url=login`
				})
			},
			isPoneAvailable(str) {
				var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(str)) {
					return false;
				} else {
					return true;
				}
			},
			getCode() {

				if (!this.isPoneAvailable(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号'
					})
					return;
				}


				console.log(this.timer, this.time, "----");
				if (this.timer) return;
				clearInterval(this.timer);

				uni.request({
					url: "/api/Sms/sendAuthCode",
					data: {
						mobile: this.mobile,
						flag: 2
					},
					success: (res) => {
						console.log(res.msg)
						
						if(res.data.auth_code){
							uni.showToast({
								title: '发送成功'
							})
							this.sms_code = res.data.auth_code
							this.verificationCode = this.time;
							this.timer = setInterval(() => {
								this.time--;
								console.log(this.timer, this.time, "----");
								this.verificationCode = this.time;
								if (this.time == 0) {
									this.verificationCode = "获取验证码";
									clearInterval(this.timer);
								}
							}, 1000);
						}
						
						
					},
					fail: (res) => {
						uni.showToast({
							title: res.msg
						})
					},
				});
			},
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			onKeyInput: function(e) {
				this.submitDisabled = false;
			},
			auth() {
				this.$wanlshop.to(`auth?url=${this.pageroute}`);
			},
			help() {
				this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
			},
		},
	};
</script>

<style lang="scss">
	.btn-delete {
		position: absolute;
		width: 10px;
		right: 0;
		top: -5px;
		z-index: 20;
	}

	.page {
		padding: 100rpx 50rpx;
		box-sizing: border-box;

		.uni-radio-input-checked {
			background-color: rgba(0, 90, 147, 1);
			border-color: rgba(0, 90, 147, 1);
		}



		.aui-bg-linear {
			background: rgba(0, 90, 147, 1) !important;
		}

		.title {
			font-size: 62rpx;
			font-weight: 700;
		}

		.sub-title {
			margin-top: 20rpx;
			font-size: 32rpx;

			.text1 {
				color: #808080;
			}

			.text2 {
				color: #005a93;
			}
		}

		.form {
			margin-top: 80rpx;

			.item {
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #e6e6e6;
				position: relative;

				.getCode {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					color: #005a93;
					width: 160rpx;
					height: 100%;
					line-height: 110rpx;
					text-align: center;
					z-index: 111;
				}

				input {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			margin-top: 80rpx;

			.submit {
				width: 100%;
				height: 100%;
				background: #b3cedf;
				font-size: 26rpx;
				color: #fff;
				border-radius: 10rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}
	}

	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
		margin-top: 50rpx;

		checkbox {
			margin-right: 6rpx;
			transform: scale(0.7);
		}

		text {
			margin: 0 10rpx;
			color: #005a93;
		}
	}
</style>